<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%--<script src="${ctxStatic}/vendor/jquery/dist/jquery.js"></script>--%>
<%--<script src="${ctxStatic}/vendor/jQuery-webcam-master/jquery.webcam.min.js"></script>--%>
<div style="z-index: 9999;position: absolute;background-color: #B3B3B3;">
<div style="display:inline-block;width: 320px;">
    <div style="text-align: center;">
        <label>拍照(重拍):</label>
    </div>
    <div id="webcam"></div>
    <div style="text-align: center;">
        <button type="button" class="btn btn-primary" onclick="webcam.capture(5);">5秒后</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-primary"  onclick="webcam.capture();">立即拍</button>
    </div>
</div>
<div style="display:inline-block; margin-left: 4px;">
    <div style="text-align: center;">
        <label>照片预览</label>
    </div>
    <canvas id="canvas" height="240" width="320" style="background:#B3B3B3; "></canvas>
    <input id="imageIsNo" type="hidden"/>
    <div style="text-align: center;">
        <button type="button"  class="btn btn-primary" onclick="yesPhotoWindow()">确定</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-primary" onclick="closePhotoWindow()">取消</button>
    </div>
</div>
</div>
<script type="text/javascript">
    var pos = 0;
    var ctxx = null;
    var cam = null;
    var image = null;
    var filter_on = false;
    var filter_id = 0;
    jQuery("#webcam").webcam({
        width: 320,
        height: 240,
        mode: "callback",
        swffile: "${ctxStatic}/vendor/jQuery-webcam-master/jscam_canvas_only.swf",
        onTick: function() {
        },
        onSave: function(data) {
            var col = data.split(";");
            var img = image;
            if (false == filter_on) {
                for(var i = 0; i < 320; i++) {
                    var tmp = parseInt(col[i]);
                    img.data[pos + 0] = (tmp >> 16) & 0xff;
                    img.data[pos + 1] = (tmp >> 8) & 0xff;
                    img.data[pos + 2] = tmp & 0xff;
                    img.data[pos + 3] = 0xff;
                    pos+= 4;
                }
            } else {
                var id = filter_id;
                var r,g,b;
                var r1 = Math.floor(Math.random() * 255);
                var r2 = Math.floor(Math.random() * 255);
                var r3 = Math.floor(Math.random() * 255);
                for(var i = 0; i < 320; i++) {
                    var tmp = parseInt(col[i]);
                    if (id == 0) {
                        r = (tmp >> 16) & 0xff;
                        g = 0xff;
                        b = 0xff;
                    } else if (id == 1) {
                        r = 0xff;
                        g = (tmp >> 8) & 0xff;
                        b = 0xff;
                    } else if (id == 2) {
                        r = 0xff;
                        g = 0xff;
                        b = tmp & 0xff;
                    } else if (id == 3) {
                        r = 0xff ^ ((tmp >> 16) & 0xff);
                        g = 0xff ^ ((tmp >> 8) & 0xff);
                        b = 0xff ^ (tmp & 0xff);
                    } else if (id == 4) {
                        r = (tmp >> 16) & 0xff;
                        g = (tmp >> 8) & 0xff;
                        b = tmp & 0xff;
                        var v = Math.min(Math.floor(.35 + 13 * (r + g + b) / 60), 255);
                        r = v;
                        g = v;
                        b = v;
                    } else if (id == 5) {
                        r = (tmp >> 16) & 0xff;
                        g = (tmp >> 8) & 0xff;
                        b = tmp & 0xff;
                        if ((r+= 32) < 0) r = 0;
                        if ((g+= 32) < 0) g = 0;
                        if ((b+= 32) < 0) b = 0;
                    } else if (id == 6) {
                        r = (tmp >> 16) & 0xff;
                        g = (tmp >> 8) & 0xff;
                        b = tmp & 0xff;
                        if ((r-= 32) < 0) r = 0;
                        if ((g-= 32) < 0) g = 0;
                        if ((b-= 32) < 0) b = 0;
                    } else if (id == 7) {
                        r = (tmp >> 16) & 0xff;
                        g = (tmp >> 8) & 0xff;
                        b = tmp & 0xff;
                        r = Math.floor(r / 255 * r1);
                        g = Math.floor(g / 255 * r2);
                        b = Math.floor(b / 255 * r3);
                    }
                    img.data[pos + 0] = r;
                    img.data[pos + 1] = g;
                    img.data[pos + 2] = b;
                    img.data[pos + 3] = 0xff;
                    pos+= 4;
                }
            }
            if (pos >= 0x4B000) {
                ctxx.putImageData(img, 0, 0);
                pos = 0;
            }
        },
        onCapture: function () {
            webcam.save();
            $("#imageIsNo").val("Is");
        },
        debug: function () {
        },
        onLoad: function () {
        }
    });
    $(function(){
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
//            获取该canvas的2D绘图环境
            ctxx = document.getElementById("canvas").getContext("2d");
//            clearRect()用于清除canvas内以指定的矩形区域中的所有图形像素
            ctxx.clearRect(0, 0, 240,320);
            var img = new Image();
//        canvas.attr("src",img);
            img.onload = function() {
                ctxx.drawImage(img,0,0);
            }
//            ImageData()返回ImageData对象，该对象拷贝了画布指定矩形的像素数据。
            image = ctxx.getImageData(0, 0, 320, 240);
        }
    })
</script>